<template>
  <view class="activePage">
    <view class="head" :style="[{ height: customBar + 'px' }]">
      <u-navbar
        title="活动预约"
        :autoBack="true"
        bgColor="#A3C616"
        leftIconColor="#fff"
        :titleStyle="{
          color: '#fff',
          fontSize: '34rpx',
          fontWeight: '500',
        }"></u-navbar>
    </view>
    <view class="activeBg">
      <view class="title">预约成功</view>
      <view class="smallTitle">感谢您的支持，请记得按时参加活动呦</view>
      <view class="writeOff">
        <view class="recordList">
          <view class="recordBottom">
            <view class="recordLeft">
              <image
                class="img"
                :src="HTTP_IMG_URL() + obj.activity.images"></image>
            </view>
            <view class="recordRight">
              <view class="titlex">{{ obj.activity.name }}</view>
              <view class="recordLine">
                预约时间：{{ obj.activity.activity_time_text }}
              </view>
              <view class="recordLine">
                支付方式：{{
                  obj.pay_type == "score" ? "积分兑换" : "微信支付"
                }}
              </view>
            </view>
            <view class="cancel" @click="handleDetail">活动详情</view>
          </view>
        </view>
        <!-- 核銷 -->

        <view class="please">
          <view class="perform">请到店进行核销</view>

          <image
            class="eqcord"
            :src="HTTP_IMG_URL() + obj.verification_img"></image>
          <view class="VerCode">
            核销码：{{ obj.verification_code }}
            <view class="copy" @click="handleCopy(obj.verification_code)">
              复制
            </view>
          </view>
        </view>
        <view class="back" @click="handleCancel" v-if="obj.status == '1'">
          取消
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { HTTP_IMG_URL } from "../../config/app.js";
export default {
  data() {
    return {
      customBar: 80,
      obj: {},
      id: "",
    };
  },
  computed: mapGetters(["isLogin", "uid", "userInfo"]),
  onLoad(params) {
    console.log(params, 333);
    this.id = params.id;
    this.getDetail(params.id);
  },
  methods: {
    HTTP_IMG_URL() {
      return HTTP_IMG_URL;
    },
    handleDetail() {
      uni.navigateTo({
        url: "/pages/reservation/recordDetail?id=" + this.obj.activity.id,
      });
    },
    handleCancel() {
      var that = this;
      that.$Api.reservation
        .cancelOrder({
          order_id: that.id,
        })
        .then((res) => {
          uni.navigateBack({
            delta: 1, // 默认值是1，表示返回的页面层数
          });
        });
    },
    getDetail(id) {
      var that = this;
      that.$Api.reservation
        .getOrderDetail({
          order_id: id,
        })
        .then((res) => {
          this.obj = res.data;
          console.log(res.data, 23);
        });
    },
    handleCopy(v) {
      uni.setClipboardData({
        data: v,
        success: function () {
          uni.showToast({
            title: "复制成功",
          });
        },
        fail: function () {
          console.error("复制失败");
        },
      });
    },
  },
};
</script>

<style lang="scss">
.activePage {
  height: 100%;
  min-height: 100vh;
  font-family: PingFang SC;
  background: #f5f5f4;
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  .head {
    background: #fff;
  }
  .activeBg {
    width: 100%;
    height: 772rpx;
    background: linear-gradient(
      #a3c616 0%,
      #ddf79a 70%,
      rgba(221, 247, 154, 0) 100%
    );
    padding: 60rpx 32rpx;
    box-sizing: border-box;
    .title {
      font-weight: 500;
      font-size: 44rpx;
      color: #ffffff;
      padding-left: 30rpx;
    }
    .smallTitle {
      font-weight: 400;
      font-size: 26rpx;
      color: #ffffff;
      padding-left: 30rpx;
    }
  }
  .writeOff {
    width: 100%;
    // height: 900rpx;
    background: #fff;
    border-radius: 28rpx;
    margin-top: 20rpx;
    padding-bottom: 54rpx;
    .recordList {
      width: 100%;

      margin-top: 20rpx;
      // display: flex;
      padding: 20rpx 22rpx;
      box-sizing: border-box;
      overflow: hidden;
      position: relative;
      .recordTop {
        display: flex;
        align-items: center;
        .img {
          width: 34rpx;
          margin-right: 10rpx;
        }
      }
      .tip {
        position: absolute;
        height: 108rpx;
        width: 108rpx;
        right: -51rpx;
        top: -53rpx;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        font-size: 20rpx;
        .name {
          top: 76rpx;
          left: 29rpx;
          color: #fff;
          position: relative;
        }
      }
      .tipused {
        background: #a3c616;
      }
      .tipsuccess {
        background: #e5e5e5;
      }
    }
    .recordBottom {
      margin-top: 12rpx;
      display: flex;
      border-bottom: 1px #e6e5e5 solid;
      padding-bottom: 26rpx;
      .recordLeft {
        width: 136rpx;
        height: 136rpx;
        background: #ffffff;
        border-radius: 28rpx;
        .img {
          width: 136rpx;
          height: 136rpx;
        }
      }
      .recordRight {
        margin-left: 12rpx;
        .recordLine {
          display: flex;
          font-size: 26rpx;
          color: #6d7278;
          margin-top: 12rpx;
        }
        .recordTime {
          color: #a3c616;
        }
      }
      .titlex {
        font-weight: 500;
        font-size: 32rpx;
        color: #000000;
      }
      .cancel {
        width: 172rpx;
        height: 56rpx;
        background: #fbffed;
        border-radius: 44rpx;
        border: 1rpx solid #a3c616;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #a3c616;
        line-height: 56rpx;
        text-align: center;
        margin-left: 22rpx;
        margin-top: 80rpx;
      }
      .pending {
        width: 172rpx;
        height: 56rpx;
        background: #f9f9f9;
        border-radius: 44rpx;
        border: 1rpx solid #dadada;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #dadada;
        line-height: 56rpx;
        text-align: center;
        margin-left: 22rpx;
        margin-top: 80rpx;
      }
    }
  }
  .please {
    width: 640rpx;
    height: 640rpx;
    background: rgba(163, 198, 22, 0.1);
    border-radius: 28rpx;
    margin: 0 auto;
    .perform {
      width: 640rpx;
      height: 104rpx;
      background: #a3c616;
      border-radius: 28rpx 28rpx 0rpx 0rpx;
      line-height: 104rpx;
      text-align: center;
      color: #fff;
      font-size: 32rpx;
    }
    .eqcord {
      width: 296rpx;
      height: 296rpx;
      display: block;
      margin: 68rpx auto;
    }
    .VerCode {
      width: 100%;
      display: flex;
      font-size: 32rpx;
      justify-content: center;
      .copy {
        color: #a3c616;
        font-size: 32rpx;
      }
    }
  }
  .back {
    width: 272rpx;
    height: 72rpx;
    border-radius: 36rpx;
    border: 2rpx solid #a3c616;
    font-weight: 400;
    font-size: 28rpx;
    color: #a3c616;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    margin: 56rpx auto 0;
  }
}
</style>
